<script setup lang='ts'>
import { ref, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import UntreatedTable from './ui/UntreatedTable.vue'
import ProcessedTable from './ui/ProcessedTable.vue'
import MaxWarnTable from './ui/MaxWarnTable.vue'
import HandlingOpinionsTable from './ui/HandlingOpinionsTable.vue'

// 控制tab切换
const activeName = ref('first')
watch(activeName, (nv, ov) => {
  switch (nv) {
  case 'first':
    untreatedTableRef.value.getUntreatesData()
    break
  case 'second':
    processedTableRef.value.getProcessedData()
    break
  case 'third':
    maxWarnTableRef.value.getMaxWarnData()
    break
  case 'fourth':
    handlingOpinionsTableRef.value.getHandlingOpinionsData()
    break
  }
})
// refs
const untreatedTableRef = ref()
const processedTableRef = ref()
const maxWarnTableRef = ref()
const handlingOpinionsTableRef = ref()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
  
}
</script>

<template>
  <div class="diagnosis-detail-main-box">
    <div class="tabs-box">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="未处理"
          name="first"
        >
          <UntreatedTable ref="untreatedTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="已处理"
          name="second"
        >
          <ProcessedTable ref="processedTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="报警最多"
          name="third"
        >
          <MaxWarnTable ref="maxWarnTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="处理意见"
          name="fourth"
        >
          <HandlingOpinionsTable ref="handlingOpinionsTableRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang=scss>
.diagnosis-detail-main-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .tabs-box {
    width: 98%;
    height: 96%;

    /* border: 1px solid red; */
    box-shadow: #dbd9d9 0 0 0 1px;
  }
}
</style>
<style lang="scss">
/* .production-statistics-tabs {
  border: 1px solid red;
} */
</style>